<template>
    <el-dialog
        v-model="componentDeleteDialogVisible"
        title="删除组件"
        width="20%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        是否确定删除？
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script name="ComponentDeleteDialog" setup lang="ts">
import {componentInfoDelete, componentInfoQueryNoContent} from "@/request/components";
import {ElNotification} from "element-plus";
import {computed, defineProps, ref} from "vue";
import {useComponentManageStore} from "@/stores/lowcode/componentManage";

let props = defineProps(['componentForm']);

let componentForm = computed(() => {return props['componentForm']})

let saveLoading = ref(false);

let componentDeleteDialogVisible = computed(() => {return useComponentManageStore().deleteDialogVisible});
let componentSearchData = computed(() => {return useComponentManageStore().componentSearchData});

function cancelDialog() {
    useComponentManageStore().resetDeleteDialogVisible(false);
}

function submitDialog() {
    saveLoading.value = true
    componentInfoDelete(componentForm.value).then(res => {
        ElNotification({
            title: 'Success',
            message: res["message"],
            type: 'success'
        });
        componentInfoQueryNoContent(componentSearchData.value).then(res => {
            useComponentManageStore().resetComponentDataList(res.data);
        })
        useComponentManageStore().resetDeleteDialogVisible(false);
        saveLoading.value = false
    }).catch(res => {
        saveLoading.value = false
    })
}
</script>

<style scoped lang="less">

</style>